<template>
	<div class="container padding-sm">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>付款申请</span>
			</div>
			<div style="padding: 0 10%;">
				<el-form ref="addForm" :rules="rules" :model="form" label-width="120px">
					<el-form-item label="所属分类" prop="category_id">
						<el-select>
							<el-option></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="供应商名称" prop="supplier_name">
						<el-input v-model="form.supplier_name"></el-input>
					</el-form-item>
					<el-form-item label="开户行" prop="bank">
						<el-input v-model="form.bank"></el-input>
					</el-form-item>
					<el-form-item label="账户" prop="account">
						<el-input v-model="form.account"></el-input>
					</el-form-item>
					<el-form-item label="付款方式" prop="payment_methods">
						<el-select v-model="form.payment_methods">
							<el-option v-for="op in defData.methods" :key="op.id" :label="op.title" :value="op.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="付款金额" prop="apply_money">
						<el-input v-model="form.apply_money" @input="priceChange(1,form.apply_money)"></el-input>
						<span class="margin-left-sm text-blue" v-if="form.apply_money!=''">（{{apply_moneyText}}）</span>
					</el-form-item>
					<el-form-item label="付款主体" prop="payment_subject">
						<el-select v-model="form.payment_subject">
							<el-option v-for="op in defData.subject" :key="op.id" :label="op.title" :value="op.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="付款事由" prop="payment_reason">
						<el-input type="textarea" v-model="form.payment_reason"></el-input>
					</el-form-item>
					<el-form-item label="应付金额" prop="amounts_payable">
						<el-input v-model="form.amounts_payable" @input="priceChange(2,form.amounts_payable)"></el-input>
						<span class="margin-left-sm text-blue" v-if="form.amounts_payable!=''">（{{amounts_payableText}}）</span>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('addForm')">申&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请
						</el-button>
						<el-button class="margin-left" @click="resetBtn">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
	</div>
</template>



<script>
import {
		getPaymentCfg,
		paymentApply,
		categoryList
	} from './index';
	export default {
		name: 'basetable',
		data() {
			var num = (rule, value, callback) => {
				let reg = /^([1-9]{1})(\d{13}|\d{18})$/;
				if (!reg.test(value)) {
					return callback(new Error('请输入14到18位账户号'));
				} else {
					callback()
				}
			};
			var price = (rule, value, callback) => {
				let reg = /^([1-9]\d{0,9}|0)(\.\d{1,2})?$/;
				if (!reg.test(value)) {
					return callback(new Error('请输入正确金额'));
				} else {
					callback()
				}
			};
			return {
				form: {
					supplier_name: '',
					bank: '',
					account: '',
					payment_methods: '',
					apply_money: '',
					payment_subject: '',
					payment_reason: '',
					amounts_payable: ''
				},
				apply_moneyText:'',
				amounts_payableText:'',
				rules: {
					supplier_name: [{
						required: true,
						message: '请输入供应商名称',
						trigger: 'blur'
					}],
					bank: [{
						required: true,
						message: '请输入开户行',
						trigger: 'blur'
					}],
					account: [{
						required: true,
						validator: num,
						trigger: 'blur'
					}],
					payment_methods:[{
						required: true,
						message: '请选择付款方式',
						trigger: 'change'
					}],
					apply_money: [{
						required: true,
						validator: price,
						message: '请填写付款金额',
						trigger: 'blur'
					}],
					payment_subject:[{
						required: true,
						message: '请选择付款主体',
						trigger: 'change'
					}],
					payment_reason:[{
						required: true,
						message: '请输入付款事由',
						trigger: 'blur'
					}],
					amounts_payable: [{
						required: true,
						validator: price,
						message: '请填写应付金额',
						trigger: 'blur'
					}],
				},
				defData:{
					methods:[],
					subject:[]
				},

				categoryList: [],

				// formData: [{
				// 	supplier: '',
				// 	bank: '',
				// 	accountNum: '',
				// 	payType: '',
				// 	price: '',
				// 	reason: '',
				// 	apitalize: '',
				// }],
				// priceText: '',
			};
		},
		created() {
			console.log('created')
			this.getPaymentCfg()
			this.getCategoryList()
		},
		methods: {
			getCategoryList() {
				categoryList().then(res => {
					console.log(res)
					this.categoryList = res.data
				})
			},

			resetBtn(){
				this.form = this.$options.data().form
			},
			getPaymentCfg(){
				getPaymentCfg().then(res => {
					this.defData=res.data
				});
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						paymentApply({row:this.form}).then(res => {
							this.$router.push('/list_payment');
							this.$message.success('申请成功');
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			priceChange(code,number) {
				var ret = "";
				if (number != "" && number != null && number != "0") {
					var unit = "仟佰拾亿仟佰拾万仟佰拾元角分",
						str = "";
					number += "00";
					var point = number.indexOf(".");
					if (point >= 0) {
						number = number.substring(0, point) + number.substr(point + 1, 2);
					}
					unit = unit.substr(unit.length - number.length);
					for (var i = 0; i < number.length; i++) {
						str +=
							"零壹贰叁肆伍陆柒捌玖".charAt(number.charAt(i)) + unit.charAt(i);
					}
					ret =
						str
						.replace(/零(仟|佰|拾|角)/g, "零")
						.replace(/(零)+/g, "零")
						.replace(/零(万|亿|元)/g, "$1")
						.replace(/(亿)万|(拾)/g, "$1$2")
						.replace(/^元零?|零分/g, "")
						.replace(/元$/g, "元") + "整";
				}
				if(code==1){
					this.apply_moneyText = ret;
				}else{
					this.amounts_payableText = ret;
				}
				
			}
		}
	};
</script>

<style scoped lang="less">
	.el-form-item {
		margin-bottom: 20px !important;

		.el-input,
		.el-textarea,
		.el-select{
			width: 500px!important;
		}
	}

	// /deep/.el-row {
	// 	border: 1px solid #EBEEF5;
	// 	border-right: 0 !important;
	// 	border-top: 0 !important;

	// 	.el-col {
	// 		height: 40px;
	// 		line-height: 40px;
	// 		border-right: 1px solid #EBEEF5;
	// 		overflow: hidden;

	// 		.price {
	// 			display: flex;
	// 			align-items: center;

	// 			.el-input {
	// 				width: 100px;
	// 			}

	// 			span {
	// 				font-size: 13px;
	// 			}
	// 		}

	// 		.el-input__inner {
	// 			border: 0 !important;
	// 			padding: 0 !important;
	// 		}
	// 	}
	// }

	// .tab-title {
	// 	border-top: 1px solid #EBEEF5 !important;
	// 	background: #f5f7fa;
	// 	color: #909399;
	// 	font-weight: bold;
	// }

	// /deep/.el-form-item.is-error .el-input__inner,
	// /deep/.el-form-item.is-error .el-input__inner:focus,
	// /deep/.el-form-item.is-error .el-textarea__inner,
	// /deep/.el-form-item.is-error .el-textarea__inner:focus,
	// /deep/.el-message-box__input input.invalid,
	// /deep/.el-message-box__input input.invalid:focus {
	// 	border-color: #fff;
	// }
</style>
